import {Button, Card, Input, message, Select, Table} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {useEffect, useState} from "react";
import LinkButton from "../../components/link-button";
import {reqProducts, reqSearchProducts, reqUpdateStatus} from "../../apis";
import {PAGE_SIZE} from "../../utils/constants";
import {useNavigate} from "react-router-dom";

const Option = Select.Option
const ProductHome= () => {
    // Product默认子路由界面

    // 设置商品列表初始值
    const [products, setProducts] = useState([])
    // 商品列表总条数
    const [total, setTotal] = useState(0)
    // 加载显示状态
    const [loading, setLoading] = useState(false)
    // 搜索关键字
    const [searchName, setSearchName] = useState('')
    // 搜索类型  productName  |  productDesc
    const [searchType, setSearchType ] = useState('productName') //默认按商品名称

    // 设置标题
    const title = (
        <span>
            <Select value={searchType}
                    style={{width: 150}}
                    onChange={value => setSearchType(value)}
            >
                <Option value='productName'>按名称搜索</Option>
                <Option value='productDesc'>按描述搜索</Option>
            </Select>
             <Input placeholder='关键字'
                    style={{width: 150, margin: '0 15px'}}
                    value={searchName}
                    onChange={e => setSearchName(e.target.value)}
             />
            <Button type='primary' onClick={() => getProducts(1)}>
                搜索
            </Button>
        </span>
    );
    // 设置额外内容
    const extra = (
        <Button type='primary' onClick={() => navigate('/product/add-update')}>
            <PlusOutlined />
            添加商品
        </Button>
    )
    const [pageNum, setPageNum] = useState(1)
    // 获取商品分页列表
    const getProducts = async (pageNum) => {
        setPageNum(pageNum)
        setLoading(true)
        let res
        if(searchName){
            // 存在搜索关键字
            res = await reqSearchProducts({
                pageNum,
                pageSize: PAGE_SIZE,
                searchName,
                searchType})
            console.log('搜索的商品分页结果',res)
        }else {
            res = await reqProducts(pageNum,3)
        }

        if(res.status === 0){
            setProducts(res.data.list)
            setTotal(res.data.total)
            setLoading(false)
        }
    }

    useEffect(() => {
        getProducts(1)
    }, []);
    const navigate = useNavigate()

    // 更新商品上下架状态
    const  updateStatus = async (productId, status) => {
        const res = await reqUpdateStatus(productId, status)
        if(res.status === 0){
            message.success('更新商品状态成功')
            getProducts(pageNum)
        }
    }
    // 初始化列数据
    const initColumns = () => {
        const columns = [
            {
                title: '商品名称',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '商品描述',
                dataIndex: 'desc',
                key: 'desc',
            },
            {
                title: '价格',
                width: 200,
                dataIndex: 'price',
                render: (price) => '¥' + price  // 当前指定了对应的属性, 传入的是对应的属性值
            },
            {
                title: '状态',
                width: 200,
                dataIndex: 'status',
                render: (product) => {
                    const {status,_id} = product
                    return (
                        <span>
                            <Button type={"primary"}
                                    style={{margin : '0 10px'}}
                                    onClick={() => updateStatus(_id, status === 1 ? 2 : 1)}
                            >{status == 1 ? '下架' : '上架'}</Button>
                            <span style={{margin : '0 10px'}}>{status == 1 ? '在售': '已下架'}</span>
                        </span>
                    )
                }
            },
            {
                title: '操作',
                width: 200,
                render: (product) => {
                    return (
                        <span>
                            {/*state 传递路由对象参数 */}
                            <LinkButton onClick={() => navigate('/product/detail',
                                {state: {product}})}>详情</LinkButton>
                            <LinkButton onClick={() => navigate('/product/add-update',{state: {product}})}>修改</LinkButton>
                        </span>
                    )
                }
            }
        ];

        return columns
    }




    return (
        <Card title={title} extra={extra}>
            <Table
                bordered
                loading={loading}
                dataSource={products}
                columns={initColumns()}
                rowKey='_id'
                pagination={{
                    current: pageNum,
                    defaultPageSize: PAGE_SIZE,
                    showQuickJumper: true,
                    total,
                    onChange: (pageNum) => {
                        getProducts(pageNum)
                    }
                }}
            />;
        </Card>
    );
}
export default ProductHome;
